<template>
  <div>
     <h3>显示</h3>
     <table>
         <thead>
             <tr>
                <td>主键</td>
                <td>标题</td>
                <td>姓名</td>
                <td>开始时间</td>
                <td>结束时间</td>
                <td>设计类型</td>
                <td>功能</td>
                <td>文本</td>
                <td>数量</td>
                <td>操作</td>
             </tr>
             <tr v-for="itme in articles" >
                <td>{{ itme.id }}</td>
                <td>{{ itme.title }}</td>
                <td>{{ itme.author }}</td>
                <td>{{ itme.publishDate }}</td>
                <td>{{ itme.updateDate }}</td>
                <td>{{ itme.category }}</td>
                <td>{{ itme.tags.toString() }}</td>
                <td>{{ itme.summary }}</td>
                <td>{{ itme.likeCount }}</td>
                <td><input type="button" value="修改">
                    <input type="button" value="删除"></td>
             </tr>
         </thead>
     </table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const articles =ref([
  {
    id: 1,
    title: "JavaScript高级编程技巧总结",
    author: "张明",
    publishDate: "2023-09-10",
    updateDate: "2023-09-12",
    category: "前端开发",
    tags: ["JavaScript", "编程技巧", "前端"],
    summary: "本文总结了10个实用的JavaScript高级编程技巧，包括闭包的高级应用、原型链优化、异步编程模式改进、函数式编程实践以及性能优化方案。通过具体案例分析，展示如何利用这些技巧解决实际开发中遇到的复杂问题，帮助开发者提升代码质量和开发效率，同时降低维护成本。文中还对比了不同方案的优缺点，提供了在不同场景下的最佳实践建议。",
    likeCount: 327,
  },
  {
    id: 2,
    title: "React组件设计模式实践",
    author: "李华",
    publishDate: "2023-09-05",
    updateDate: null,
    category: "前端框架",
    tags: ["React", "组件设计", "前端框架"],
    summary: "深入探讨React中常见的组件设计模式，包括容器组件与展示组件的分离策略、高阶组件的封装技巧、Render Props模式的灵活应用以及最新的Hooks模式最佳实践。文章通过多个完整案例，展示如何在大型应用中实现组件的高内聚低耦合，提高代码复用率和可维护性。同时分析了不同设计模式的适用场景和性能影响，帮助开发者在实际项目中做出合适的技术选型。",
    likeCount: 215,
  },
  {
    id: 3,
    title: "Python数据分析入门指南",
    author: "王芳",
    publishDate: "2023-08-28",
    updateDate: "2023-09-01",
    category: "数据分析",
    tags: ["Python", "数据分析", "Pandas"],
    summary: "从零开始学习Python数据分析，涵盖环境搭建、数据结构基础、NumPy数组操作、Pandas数据处理与分析、Matplotlib和Seaborn数据可视化等核心内容。通过电商销售数据、用户行为分析等真实案例，详细讲解数据清洗、转换、聚合、分组分析等关键步骤的实现方法。文章还介绍了数据分析项目的完整流程，从需求分析到报告呈现，并提供了可直接运行的代码示例和常见问题解决方案。",
    likeCount: 453,
  },
  {
    id: 4,
    title: "UI设计中的色彩心理学应用",
    author: "赵伟",
    publishDate: "2023-08-20",
    updateDate: null,
    category: "设计",
    tags: ["UI设计", "色彩心理学", "用户体验"],
    summary: "解析不同色彩在UI设计中对用户心理产生的影响，包括红色如何激发紧迫感、蓝色如何传递信任感、绿色如何营造舒适感等。文章详细介绍了色彩三要素（色相、饱和度、明度）的调节方法，以及主色调、辅助色、对比色的科学搭配原则。结合金融、电商、教育等不同行业的设计案例，展示如何根据产品定位和目标用户群体选择合适的色彩方案，提升用户体验和转化率。同时提供了实用的色彩工具推荐和常见配色误区提醒。",
    likeCount: 189,
  },
  {
    id: 5,
    title: "微服务架构设计与实践",
    author: "陈强",
    publishDate: "2023-08-15",
    updateDate: "2023-08-22",
    category: "后端开发",
    tags: ["微服务", "架构设计", "分布式系统"],
    summary: "详解微服务架构的设计原则、服务拆分策略以及在实际项目中的落地实践经验。文章从单体架构的局限性出发，分析微服务带来的优势与挑战，介绍领域驱动设计(DDD)在服务拆分中的应用方法。内容涵盖服务注册与发现、配置中心、API网关、负载均衡、熔断降级等核心组件的选型与实现，以及分布式事务、数据一致性等关键问题的解决方案。结合电商平台的微服务改造案例，分享从设计到部署的完整经验，包括团队组织方式和DevOps实践。",
    likeCount: 298,
  }
]);

</script>

<style scoped>

</style>
